<template>
	<view class="content">
		<r-canvas ref="rCanvas"></r-canvas>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	export default {
		components: {
			rCanvas
		},
		onReady() {
			this.$nextTick(async () => {
				uni.showLoading({
					title:'绘制中',
					mask:true
				})
				let that = this
				await this.$refs.rCanvas.init({
					canvas_id: 'rCanvas',
					background_color: '#fff',
					canvas_width:375,
					canvas_height:315,
					scale:2
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawImage({
					url: '/static/example3/cover.jpg',
					x: 10,
					y: 10,
					w: 350,
					h: 200,
					border_radius:10
				}).catch(err=>{
					this.error(err)
				})
			
				await this.$refs.rCanvas.drawText({
					text: '这个世界真的很美好 ,这个世界充满着爱。我迎着晨曦而出,踏着晚霞而归,等着我的,是家里温热的饭菜。',
					x: 20,
					y: 240,
					max_width:220,
					font_size:16,
					line_height:23,
					font_family:'PingFang SC, "Microsoft JhengHei", "Microsoft YaHei"',
					line_clamp:3,
					font_color: 'black'
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawImage({
					url: '/static/qrcode.png',
					x: 270,
					y: 220,
					w: 76,
					h: 76,
					border_radius:4
				}).catch(err=>{
					this.error(err)
				})
				
				// 生成海报
				await this.$refs.rCanvas.draw((result) => {
					uni.hideLoading()
					uni.showModal({
						title:'提示',
						content:'是否下载当前生成的海报？',
						success:(res)=>{
							if(res.confirm){
								// 保存图片
								this.$refs.rCanvas.saveImage(result.tempFilePath).catch(err=>{
									this.error(err)
								})
							}
						}
					})
				}).catch(err=>{
					this.error(err)
				})
			})
		},
		methods:{
			error(msg){
				uni.showModal({
					title:'错误信息',
					content:msg,
					showCancel:false
				})
			}
		}
	}
</script>

<style>
page{
	background:rgb(245,245,245);
}	
</style>
